#css portrait image effect | Explore Tumblr posts and blogs

dgdraws · 1 year ago

Text

My art year in review!

I learned so much this year and made a ton of cool stuff! These are my favorites from each month, but it was so hard to choose. A lot of stuff didn't even get posted--I'll be sure to at least post the ones that made it to this list!

It's amazing to see how much I've changed and learned over this year, and to see the things that are emerging as part of "my style."

Here's to another year of delight, creation, connection and fun!

Some monthly reflections beneath the cut, but here's the highlights:

I participated in 3 art challenges, Artfight, OC-tober and Huevember.

I made fanart for the first time!

I created a piece I conceived of before I started drawing

Made some big breakthroughs in techniques and skills in April, July and November

January: My first branch into full character design, Rodd is the culmination of training on Hero Forge renders to make dnd portraits! I was doing this cool thing with neon rim lighting, I should bring that back!

February: I saw a piece on here with this amazing glowing effect, so I color picked it and experimented to figure out what relationship between the colors was making it do that! The answer was saturation. This rose is meant to be glowing from within, and I think I did a good job for my knowledge level at the time! As Chuck Tingle would tell us, it's beautiful because only I could have made it in that moment on the timeline.

March: I spent a million years on every detail of this one, it has at least 5 clipping overlay/saturation layers for lighting, multiple line work groups and I want to rework that background but! I never felt more accomplished than I did when I finished this one. I learned a lot, especially about things I could skip or simplify. And the symbolism really pops off ngl

April: I read Gideon the Ninth for the first time this month and I immediately needed to draw Jeannemary Chatur, Cavalier of the Fourth House, the worst teen to do it. She's the first fanart I ever made and posted! I also discovered a new pen tool with this one, which CHANGED THE GAME.

May: This one is an idea I had written down before I ever picked up the tablet and stylus. I thought I might commission someone to make it, the image of it came to me so clearly during our VTM session I just had to make it real somehow. Well I did it! This is one I will come back to redraw in like 5 years bc I love the concept so much. Also rife with symbolism and inside nods to the Low Kings.

June: I made a bunch of ref sheets in the run-up to Artfight in July. Caleb hadn't even been in my plans to upload, but I had time and inspiration! I will be uploading this and a few more of him <3

July: This is one of my faves from Artfight! This character is Blueberry, by way of OrchidEatsBread on artfight. I have still never played... rainworld? But I love me a slug cat. In July I drew a TON of people, it really drilled anatomy basics into me and how to get clothes looking like actual clothes a bit more. Also solidified some things I would consider "my style" at the moment, like no irises, and my approach to noses and mouths and fingers!

August: Another fanart for the Locked Tomb series, I never posted this!!! Will be rectifying that soon.

September: I got really into javascript and css this month, and I made this to be a landing page image on my neocities website XD I'll get back around to that eventually...

October: At the last minute, I discovered OC-tober and the prompts from @/bweirdart, a worthy follow up to the rush of Artfight two months previous. I developed so much stuff for the Low Kings, including this drawing/character, Amayah/Girl-Z, who has been a figment of my pintrest board for 2+ years.

Huevember: Chasing that OC-tober high, I found Huevember! I did not expect to actually do every day, but it proved to be an amazing exercise! I learned so, so much about color, discovered amazing new brushes and techniques and found I really enjoy working in those one day capsules! I loved a lot of the stuff that came out of this month, including my highest note post ever!!!, but this one is still my phone background and I'm maybe developing an OC world around it. We'll see what happens in 2024.

December: I got hit HARD with the writing bug this month, so this was my only choice for this month but I WOULDA CHOSEN IT ANYWAY. I unlocked something here that I'm really excited to visit again, in fact I'm working on a companion piece rn! This is also fanart btw, prepare for me to get even weirder about this guy in the coming months.

If you've read this far, thank you so much! I have so much fun writing these little reflections and making my posts on here.

xoxo, wren

#my stuff #reflections #low kings #oc tober #huevember #artfight #year in art #year in review

4 notes · View notes

sonulohiaems · 1 year ago

Text

In today's digitally driven world, users access information from a plethora of devices – desktops, laptops, tablets, smartphones, and even smartwatches. As a web designer, ensuring your website delivers an optimal experience across this vast landscape is no longer a nicety, it's a necessity. This is where responsive web design (RWD) comes in.

RWD is a design philosophy that prioritizes creating websites that adapt and adjust their layout based on the size and capabilities of the device being used. It's not about creating separate websites for each device, but rather a single website that can fluidly transform itself to fit any screen.

Why Responsive Web Design Matters

The dominance of mobile browsing makes RWD an essential strategy for several reasons:

Enhanced User Experience (UX): Imagine a website with text so tiny it's unreadable on a phone, or buttons too close together to tap accurately. Frustrated users are likely to abandon the site altogether. RWD ensures clear readability, easy navigation, and intuitive interaction regardless of the device.

Improved Search Engine Optimization (SEO): Search engines like Google prioritize mobile-friendly websites in their rankings. A responsive design helps your website rank higher in search results, leading to increased organic traffic.

Cost-Effectiveness: Maintaining separate websites for different devices can be a significant drain on resources. RWD eliminates this need, saving time, money, and ongoing maintenance efforts.

Brand Consistency: A responsive website ensures a consistent brand image across all devices. Users will experience the same look, feel, and message, regardless of how they access your website.

Core Principles of Responsive Web Design

Here's a breakdown of the key principles that underpin effective responsive web design:

Fluid Grid Layouts: Imagine a flexible grid system that can expand or contract to accommodate different screen sizes. This is the foundation of RWD. By using percentages instead of fixed pixels to define widths and margins, elements on your website can resize proportionally to fit the available space.

Flexible Images and Media: Images and videos are crucial website components, but they can become problematic on smaller screens. Responsive design utilizes techniques like flexible image containers and media queries (CSS code that dictates how styles change based on screen size) to ensure images resize or even swap out for smaller versions on mobile devices.

Media Queries: As mentioned earlier, media queries are the workhorses of RWD. They allow you to define specific styles for different screen sizes and orientations (portrait or landscape mode). For example, you can use a media query to adjust the number of columns in your grid layout for a tablet view or increase font size for better readability on a smartphone.

Responsive Navigation: Navigation menus on desktops often utilize horizontal layouts with multiple dropdown options. On mobile screens, such menus become cumbersome. RWD employs techniques like hamburger menus (three horizontal lines that reveal the navigation options when tapped) or responsive tabs that adapt to fit the smaller screen size while maintaining easy access to all navigation elements.

Building a Responsive Website

While RWD might seem complex, the process can be broken down into manageable steps:

Planning and Defining Breakpoints: Identify the key screen sizes your website needs to cater to – desktops, tablets, and mobiles might be the basic starting point. These are your breakpoints, where the layout of your website will adapt.

Fluid Grid System: Establish a flexible grid system using CSS that can adjust to different screen sizes. Frameworks like Bootstrap can be helpful in simplifying this process.

Responsive Media: Ensure your images and videos are optimized for responsiveness. Use tools that allow for different image sizes to be served based on the device.

Media Queries: Implement media queries to define how styles change at each breakpoint. Start with basic adjustments for font sizes, image sizes, and layout modifications before diving into more complex interactions.

Testing and Refinement: Test your website rigorously across different devices and screen sizes. Emulators and browser developer tools can be invaluable in this phase. Refine your design based on the testing results to ensure a seamless experience on all devices.

Beyond the Basics: Advanced Responsive Design Techniques

As you gain experience with RWD, you can explore more advanced techniques:

Responsive Typography: Use relative font sizes (ems) that adjust based on the parent element's size, ensuring optimal readability across devices.

Progressive Enhancement: Start with a basic website that functions well on all devices and then progressively enhance the user experience with additional features for larger screens.

Responsive Forms: Ensure forms are easy to fill on mobile devices by using appropriate input types and larger touch targets for buttons.

0 notes

lcb-oil · 5 months ago

Text

Limbus Company Wiki Style for AO3

Note: This post contains spoilers (... can I call it that?) for Glimpsing a Certain Mirror World.

While I was writing this story, I wrote some in-game dialogue for an identity based on the text just to get into the spirit of what I was trying to capture.

Then I thought - what if I shared that in a bonus chapter, just for fun?

Then I thought even more that it kind of looked like an imaginary wiki page.

Then I had Carmen help me present a wiki page from another reality.

Seems like readers got as much of a kick out of it as I did writing it!

Now I'll show you how to style an AO3 page to look a little bit like the wonderful Limbus Company Wiki, too!

If a CSS and HTML snippet demonstration is all you need, grab them here:

🔗HTML (Inside your story)

🔗CSS (Inside a Work Skin, made on your dashboard)

Next, I'll go over everything step by step from the beginning.

Jump into the cut for the tutorial!

(Then show me your fan identity stories when you make some, okay?)

Step 1: Create a Work Skin

After logging in, go to your Dashboard.

Then click Skins

Then go to My Work Skins

Click Create Work Skin

Give it any name and description you like

Paste the following into the CSS text area:

🔗Pastebin Link for easy copy / paste

#workskin td, #workskin th { padding: 5px; border: 1px solid #810000; } #workskin td { color: white; background-color: #1e1e1e; vertical-align: middle; } #workskin td.title-column { width: 20%; text-align: center; } #workskin div.affiliation { font-size: small; } #workskin .userstuff p.carmen { color: red; }

I will explain what this means when we get to the next step so that you can tweak it if you wish. Think of this as your starter style.

Click Submit to save your skin

Step 2: Apply the Skin to Your Work

When creating or editing a work, you can set the work skin in the Associations section.

Click the dropdown, and you'll see whatever name you gave your work skin in the first step mixed in with the default ones provided by AO3.

Step 3: Format Your Story

You'll need to add HTML to your story to see any of the new styles applied.

I'll show you a few examples of how this is done.

Change the color of text

I used red text to indicate Carmen speaking through the author's note.

Here is the HTML I used in the Chapter Notes section to do this:

<p class="carmen">Could it be that you, too, wish to glimpse the mirror world these two envisioned?</p>

This creates a paragraph (p) with the carmen class applied.

If we look at the CSS from up above:

#workskin .userstuff p.carmen { color: red; }

The p.carmen section is called the selector. This tells the CSS that if there's a paragraph with the class of carmen, make it red!

You can copy this line to create classes with any name you wish for paragraphs so that you can have as many colors and effects at your disposal as you want.

Of course you can change the color from red to any other color you need, too.

Wiki Tables

This next part is a little bit more involved. I'm not sure if there's a better way to make a table on AO3 or not, but here's a snippet to get you started:

🔗Pastebin Link for easy copy / paste

<table> <tbody> <tr> <td class="title-column"> </td> <td> The child looked immensely frustrated, standing in the lobby of a most unique Fixer Office. </td> </tr> <tr> <td class="title-column"> <img src="your image URL here" alt="Sancho Story Portrait"> <div class="affiliation">Manchegan Office</div> <b>Sancho</b> </td> <td> We went over this just <em>yesterday</em> -- </td> </tr> </tbody> </table>

This creates a table (<table>) with two table rows (<tr>).

Each table row has two table cells (<td>).

The first cell in each row has the character image, affiliation, and name.

The class "affiliation" is defined in the style sheet to make that section of text just a bit smaller, like on the wiki:

#workskin div.affiliation { font-size: small; }

In the first example table row (<tr>) above, you can see that you can even leave it blank to allow for the narration portions of the story.

You'll need to copy the section between the <tr> and </tr> tags to create new rows for your table. Copy it once per line in your identity story and change the text and images inside as needed.

I highly suggest that you do this in a text editor on your own computer rather than on AO3, because it can quickly get overwhelming.

Just looking at this in AO3 is making me nervous 💦

(Fun side note, I originally spelled "Manchegan" incorrectly in my first draft all over that huge table... thank goodness for find and replace...)

Hosting Images

You'll see I left a section on the table template for "your image URL here".

You'll have to find a place to host your images on your own, because AO3 doesn't provide any image hosting...

I saw someone suggested https://imgbb.com/, so that's what I used. It seems to have held up so far.

Keep in mind if you link an image from Discord or Imgur, they could remove your image sometime in the future and then it will no longer appear properly in your story.

(Be sure to include an alt text in the image as shown - if the image can't be loaded some day in the future users will see that text instead so that they can understand what they're missing!)

Step 4: Adjust Away!

Once your work skin is applied and you have the right HTML classes in place, you can edit your Work Skin and see your story change, even if it is in your drafts.

You can use this to adjust other things in my CSS example, like colors and the padding in the table.

---

Have fun, and let me know if you have any questions!

“Would you care for some tea?” Yi Sang offered. The evening’s chill was somehow present, even inside his closed room. “Nay,” Don Quixote took in a sharp breath, “I was hoping that you might… assist me, with a look into thy mirror. For there is something that I have need to see.” Yi Sang creased his eyebrows. Unfortunately, this was exactly what he worried would occur. ——— In the aftermath of La Manchaland, Don Quixote asks Yi Sang for a favor. Yi Sang guides her through the process of glimpsing a certain mirror world.

Limbus Company leaves so much unsaid by not showing us what happens immediately after the end of a canto. But, that's a lot of opportunity space to play with in a story.

I've been working on this one for quite some time as I've always wanted to explore the dynamic between Don Quixote and Yi Sang, even though I find Yi Sang really tough to write for.

If you like mirror worlds and AUs, you might especially enjoy this one. I hope you like it! 🎠🪶

---

... Also, hmm, something strange seems to have happened with my upload?

This is a one shot story, but for some reason there's a second chapter? That's odd.

Well, if you check it out, I should note that it might look better on a PC or tablet than on a mobile phone -- though it will probably look ok either way.

#limbus company #lcb-oil-table-talk #tutorial #ao3 #canto 7 spoilers #canto vii spoilers #I'm honestly surprised that Tumblr doesn't have support for code blocks #That's a little disappointing

47 notes · View notes

veryutils · 2 years ago

Text

VeryUtils HTMLPrint Command Line is a Windows printing utility intended for printing HTML, ASCII text documents, and image files

VeryUtils HTMLPrint Command Line is a Windows printing utility intended for printing HTML, ASCII text documents, and image files, including those with the following file extensions: .htm, .html, .txt, .png, .gif, .bmp, .jpg, .jpeg, .wmf, and .emf. HTMLPrint operates as a command-line tool designed to send HTML content to a printer, all without displaying prompts to the user. By default, it utilizes the system's default printer unless an alternative is specified in the command line.

The VeryUtils HTMLPrint Command Line product serves the purpose of batch printing HTML, MHTML files, or web URLs on Windows Printers. It enables the printing of complete web page content to a Windows Printer seamlessly, eliminating the need for user interaction. Furthermore, it provides full control over the printer's capabilities through the DEVMODE structure. VeryUtils HTMLPrint Command Line relies on Microsoft Internet Explorer to render HTML pages, ensuring support for all features present in the MS Internet Explorer application.

VeryUtils HTMLPrint Command Line stands out as a handy and potent tool that excels in batch mode, enabling the printing of large volumes of HTML, MHTML files, or Web URLs in real-time. Additionally, VeryUtils HTMLPrint Command Line is developer-friendly, allowing developers to access the product via various programming or scripting languages, including but not limited to Visual Basic, C/C++, Delphi, ASP, PHP, C#, .NET, and more.

✅ VeryUtils HTMLPrint Command Line Key Features: •Print HTML to a specific printer. •Enable user prompts with a print dialog, allowing for printer setting adjustments and manual page selection. •Load/Save DEVMODE data from/to a disk file. •Set copy number, orientation (portrait/landscape), duplex (simplex/horizontal/vertical), color (monochrome/color), x-resolution, y-resolution, collate, and scale options for the printer. •Support for over 100 standard paper types (refer to Paper Definition). •Accommodate any custom paper size. •List installed printers on the system. •Display bins/trays available on a printer. •Configure the paper bin (paper tray) for a specific printer. •Restore original settings to the printer after printing. •Monitor print job status and automatically delete failed jobs if necessary. •Print background color and images in HTML pages. •Exercise control over header, footer, and margins. •Achieve printing without user interaction. •Support "postdata" when printing HTML pages. •Show or hide the print preview dialog as needed. •Output debug messages during the printing process. •Print HTML pages containing CSS, JavaScript, Java Applet, SVG, Flash, or iframe elements. •Ensure compatibility with all features supported by Microsoft Internet Explorer. •Implement a feature to force the printing of large HTML pages or exit the process if a timeout occurs. •Send HTML directly to a specified printer. •Control header, footer, and margins effectively. •Maintain a user-independent printing experience. •Retrieve HTML content from files or via command line switches.

✅ Printing Options with HTMLPrint Command Line:

VeryUtils HTMLPrint Command Line offers multiple flexible methods for printing, making it a versatile tool for various printing needs:

Batch Printing with Retainable Lists: •HTMLPrint allows you to create and manage lists of documents that can be retained for future use. •These lists can be automatically printed in a document sequence of your choosing. •This feature streamlines the printing of multiple documents, ensuring they are processed in the desired order.

Printing HTML Files via Command Line: •You can initiate HTML printing directly from the command line. •By passing the file or directory name to HTMLPrint as a command line parameter, you can print HTML files effortlessly. •HTMLPrint processes these files invisibly, without any user interaction. •For detailed instructions on using the command line, please continue reading below.

Directory Monitoring: •HTMLPrint offers a convenient feature known as Directory Monitoring. •When activated, HTMLPrint continuously watches a specified folder within the Windows Task Bar for incoming HTML or image documents. •As soon as documents are detected, HTMLPrint automatically sends them to the designated printer for hassle-free printing.

It's important to note that HTMLPrint operates as a visible application when started without any command-line arguments. It cannot function as a service.

✅ Command Line Parameters Usage:

When utilizing the command line for HTML printing, follow these guidelines: •To print an HTML file from the command line, provide the filename as a parameter. •You can enhance your printing experience by adding additional parameters to configure various printing settings to meet your specific requirements.

HTMLPrint is designed to seamlessly integrate with other software or batch files. It can be called upon by passing the HTML or TXT file names or image filenames (GIF, JPEG, BMP, PNG, WMF, or EMF) as parameters in the command line. Additionally, you have the option to pass a text file containing a list of files to be printed or a directory path, expanding the tool's flexibility.

✅ Printing Lists or Files from a Predefined Directory (Directory Monitoring):

HTMLPrint offers a valuable Directory Monitoring feature: •HTMLPrint can actively monitor one or more folders, continuously scanning for incoming HTML documents or images. •When new documents are detected, HTMLPrint swiftly sends them to the specified printer. •Alternatively, you can predefine file lists, save them, and schedule printing tasks. •This feature provides the flexibility to print files without saving them, streamlining your printing workflow.

VeryUtils HTMLPrint Command Line is a powerful and versatile tool for handling various printing tasks. Whether you need to print batches of documents, initiate HTML printing from the command line, or employ directory monitoring for automated printing, HTMLPrint has you covered. It offers user-friendly options for enhancing your printing processes and can be seamlessly integrated with other software or batch files for increased efficiency. Say goodbye to printing hassles and optimize your workflow with HTMLPrint Command Line.

0 notes

bugsnax · 2 years ago

Text

things i consider myself proficient at:

drawing of course

formatting complicated and aesthetically pleasing word docs and google docs

spreadsheets and excel (mostly data entry and running numbers)

most of the adobe creative suite (in order, from most to least confident in using: photoshop, indesign, lightroom, illustrator, after effects, premiere)

drawing, rigging and animating live2d models

sequential art, drawing comics (to a lesser extent, storyboarding)

graphic design but only sometimes (i can format a mean resume and i'm ok with logos)

editing videos (working on this one)

taking and editing photos for an online store or social media posts

editing graphics (twitch overlays, commission graphics, social media graphics, etc.)

photoshopping images in general

acrylic painting (particularly pet portraits, but i recently learned i can do landscapes and other stuff with a reference)

linocut printmaking

cricut machines (using them to make weird shit mostly)

creating and programming amiibo tokens

creative writing (mostly scripting for comics and graphic novels. i can also write essays really well)

shiny hunting, breeding for ivs (but competitive pokemon meta and movesets? not so much.)

i know the bare minimum of how to code using css and html

#hey who gives a digit?

5 notes · View notes

idrellegames · 4 years ago

Note

Everything looks great so far, and I’m loving the art! You have so many features, and I was wondering how you learned everything. Did you know how to code before this or did you have to learn?

Thank you so much! Shout-out to @sunshinemage, who did the cover art and the companion portraits. 💗 All of the other in-game images are assets designed with royalty-free vectors from Canva.

I did not know a thing about coding before this project! I knew a little about how to edit HTML and how to change colours in CSS (just from using custom tumblr themes), but I didn't know anything else. All of the conditional logic, the SugarCube format, and CSS and Javascript were new to me.

I've been using Twine as my engine since 2019, so everything I know has been a hands-on learning process since then. Some of the new features are things I've learned in just the past couple of months (such as the mobile compatibility--I only just recently started understanding media queries and how to use them effectively). And the vast majority of it has been trial and error, looking things up online, and trying it out until I get it to work.

It's been a slow process of "think of the thing" -> "look up how to do the thing" -> "try to implement the thing" -> "fail at implementing the thing" -> "fiddle with the thing until it works" -> "if it doesn't work, try again later when you know more". 😅

Pre-Launch Wayfarer AMA

#wayfarer #wayfarer if #process #interactive fiction #answered

20 notes · View notes

smabrothers · 4 years ago

Text

11 Reasons Why You Should Update Your Site this Year

DO YOU LOVE YOUR WEBSITE?

If the answer is no or not really, you shouldn’t even continue reading this article. Just go visit our shop, choose a design that you like and start building a website that you’ll be proud to share online, and invite prospects to browse through. A site that will effectively promote your work and help you book more clients. Otherwise, what’s the point in keeping this powerful marketing tool, investing time and effort into it, if it doesn’t help your business grow and flourish?

It’s not enough to JUST have a website. It needs to look good, it needs to present information in a clear, accessible way. It needs to create a strong first impression and make your prospects feel like they’ve found THE ONE. Otherwise, you’re competing for the attention of the same audience alongside another few hundred businesses. And let’s agree, that’s an exhausting game.

If you’re not sure whether your current website does a good job, here are 11 aspects you can look into to decide whether it’s time for a revamp (listed in no particular order). Know that our Biggest Sale of the year is coming soon. If you want to grab a higher discount code this Black Friday, join our Facebook Community group. That’s where all the secret deals will be shared!

1. It’s Not Memorable and Doesn’t Stand Out

What was cool 3 years ago, may not be this year. Maybe you were one of the early adopters of a new design style or aesthetic, but that was 2-4 years ago. Look around, everyone has similar website designs, especially if they use them ready out of the box. That’s why we created Flexthemes and Flexblock – to empower you with more design freedom. Create your blocks and page layouts. Make your website look and feel like YOU. It’s all simple and intuitive. No code skills are required.

And, you can personalize your mobile site version too, if you want.

2. It Doesn’t Reflect Your Brand

This one should be straightforward. Your website promotes your business online 24/7. If you’ve rebranded recently, if your photography style changed and evolved, if you’re offering new products and services to your customers – your website should reflect and advocate that change. Otherwise, you’re attracting the wrong type of clients, those who are after your old type of work. This brings us to reason #3.

3. You’re Not Attracting the Right Clients

We explain this in more depth in How Design Affects Your Business Growth article, but the point is – if you are not getting inquiries from the type of clients you want to work with, you are not positioning yourself correctly on the market. One golden rule is to carefully curate your work. Check the content and galleries you show on your website, remove the type of work you don’t want to do in the future (i.e. family, portrait, editorial, etc). Carefully select your BEST, fresh images (the type of projects you want to do more of) and include them on your homepage. This will immediately filter out some of the inquiries which are not a good fit for you. Make sure all your content is consistent, including colors, fonts, icons. An example of consistency in a website would be this.

4. Outdated Theme & Technologies

This one affects your visitors’ experience on your website. “Old school is cool” does not apply when it comes to functionality. The digital world is constantly changing and evolving. Web standards shift each year, dictating new tools and technologies for building a good website. Your clients’ preferences and tastes shift even faster. What was trendy yesterday, may not be next week. Hence, if you want your business to succeed, you need to be agile with your visual presentation and website design.

If you’ve built your website over 3 years ago, most likely it’s far behind in terms of looks and functionality. It probably has outdated code that can slow down its loading speed or the way it responds on different devices. It may also not be compatible with some of the latest popular browsers. Take our example, 3,5 years ago we launched our first Classic themes with the drag and drop page builder, a year and a half ago we released FlexBlock, and in November 2019 the world greeted the first Flexthemes.

The difference between our old, classic themes and the Flexthemes is huge (we explain it here). Building a custom-looking website with our new themes is a whole lot easier. You don’t need to know code, you don’t need to add CSS snippets or hire a technical team. The new visual editor is so simple, your grandma could probably do it (yet please don’t make her do your tasks).

The bottom line here, if it’s been a while since you’ve built your site, start looking for website design inspiration and a more modern template to use as a base.

5. Mobile Friendly

I sure hope this is not the case, but if you still don’t have a mobile-friendly website – get a new theme NOW! Even if you do have a responsive or adaptive design, you still need to keep up with the latest trends. Newer themes include modern CSS code which allows your site to adapt nicely to any device. They also allow you to hide certain page blocks for mobile and ensure a faster and smoother user experience. Also, you must know that Google cares about the experience you offer to your mobile guests, since over 50% of website traffic comes from portable devices.

Offering more control to our clients over the design and functionality of their mobile websites has always been an important goal on our list. With Flexthemes, the steering wheel is in your hands. You have access to the mobile view of your website sections, can easily make adjustments, hide or show certain areas of your site to ensure a truly wonderful and unique browsing experience for your mobile guests.

If you’re not sure how many of your prospects access your website via their phone, if you’re wondering whether it makes sense for you to customize your mobile site – check your site’s stats. You can do that via your Google Analytics account if you have one connected to your website.

Mobile is important and it won’t go away in the next years. Don’t leave money on the table with a poorly performing mobile site, it’s one of those crucial business aspects that you can’t ignore anymore.

6. Your Website Loads Slow

Aim for a loading time under 4 seconds. If you’re not sure how quickly your site loads, use tools like Pingdom or GTmetrix to check how long it takes for your site to load, and which files are the troublemakers. Poor results could mean you have some work to do. Slow loading speed could be caused by several reasons: heavy, unoptimized images, underpowered hosting and, even an old, poorly performing theme.

The first one can be easily solved by following this Ultimate Guide to Saving Your Images for the Web. For the second one, check out this article describing 5 key criteria to choosing a good hosting provider. Yet, if the issue is caused by an old, outdated website template, you can start shopping for a new one.

View Flothemes website templates here.

7. Your Bounce Rate is High

This is extremely important. If you’ve been pouring your heart and time into blogging, SEO and marketing, bringing a lot of traffic to your website – yet the second they access your homepage (or any other page), they bounce right off of it – you have a problem. You’re losing leads and potential clients.

A high bounce rate indicates that you’re doing something wrong, either with content, with the navigation of your website, or the overall look and feel on your site. On average, a bounce rate between 40-60% is considered to be OK (this varies depending on your industry).

You can check your bounce rate via Google Analytics. Log in and go to Acquisition >> Overview tab. If it’s higher than 70%, follow these 9 Steps to reducing your Bounce Rate. If it doesn’t help, it’s time for a website redesign, and we do suggest seeking some expert advice in UX and UI.

In case you want to dive deeper into Measuring Performance and Tracking Success for your site, download our SEO guide here.

8. Security

To be honest, new or old, any website can be hacked. The experience is stressful and painful, especially when you lose information, or/and have to rebuild everything from scratch. However, older websites rely on older technology, therefore chances of a security breach are higher. Make sure your theme is updated and follow these 12 steps to make your site more secure.

9. SEO

Let’s start with the basics. Do you have a blog? You should, as it’s a powerful marketing tool to drive more traffic and users to your website, through keywords, internal links and, backlinks.

You also need to know that search engines love good, updated content. Every time you make an update to your site, Google and other search engines crawl and index your pages, thus your site ranking gets recalculated. If you keep your content updated and of GOOD QUALITY, you increase your chances of getting noticed on Search Result pages. Pair that with a charming, good-looking website, and you’re guaranteed more attention.

If SEO is something that you’ve been planning to dive deeper into, check out our SEO guide for photographers. Also, take a look at this incredible post by Dylan M Howell on Content Strategy and How to Blog like and Expert.

10. Do I need Call to Action?

Of course, you do. And it’s not just a button or link added here and there. It has to be placed strategically, to keep your users engaged with your website and browsing through more content. We explain How Call to Actions work in Design in this article, but the idea is to guide your site visitors through your content to your Best Work, then to your contact form or sales page. If your current website is limited in CTAs (Call to Actions) and doesn’t allow much customization – it’s time to get something more flexible and powerful. With Flexthemes for example, you can easily create new page layouts to support your sales campaigns and convert more users into prospects. They allow you to fully customize any layout, add buttons, images, videos, texts, and other design elements.

Never leave your site visitors wondering what they should do next. If it’s not subtle and intuitive, they’ll leave and never return. And that’s sadly a lost business opportunity.

11. All those Cool Apps & Integrations

An old outdated website template may not keep up with all the new apps, plugins, and integrations available out there. So, if you want to integrate your favorite Studio Management System, Photo Editing app or, any other useful tools that simplify your workflow – be prepared to update your website on a regular 1-2 year basis, and use the most modern, up to date templates for that.

#integration #search engine optimization #yourwebsitematters #smabrothers #ProTips

1 note · View note

kuwaitwebdevelopment98 · 4 years ago

Text

Why Your Business Should Upgrade to a Responsive Web Design Sooner Rather Than Later

Why should my business have a responsive web design?

Responsive web design has become the go-to solution for businesses who want a user friendly interface and higher customer retention. If your company has come this far without taking advantage of all the benefits it has to offer, you may have already begun to see lower visitor numbers and a disappointing conversion rate.

As a responsible business owner, you'll probably need convincing before paying to upgrade your web presence to one that includes responsive design. However, by opting in you'll soon see a return on investment that will make it worthwhile. In a nutshell, responsive design is just better than what has gone before and in order to keep up with the competition, you'll need it too.

Responsive web design is crucial for the majority of businesses because it allows your users to achieve their goals quickly and smoothly. The important elements of your website can be pulled up on a smart phone and appear as a fully functional version of the original, complete with all the utility you'd offer to customers on a laptop or desktop computer. If you fail to provide a mobile-friendly experience like this for your visitors they won't hang around, they'll simply click away and complete the action or purchase on a rival site.

Unhappy customers are not good for business and neither is going up against a major search engine. Google have recently confirmed what many insiders have suspected for some time - sites that are not optimised for multiple users will slip down their search rankings. Google bases their rankings on how useful a page is for the query a user has entered, plus the utility of the site - for example, can a user complete the action they would like to?

Your page may be completely relevant to their search, but if visitors cannot access the content easily across a number of devices, your site may receive a less than positive review and be placed lower in the search results. If your company is reduced to a second or third page entry you'll lose a considerable amount of traffic, as people naturally select links from the first page.

Google have also pointed out that companies which have a single responsive website - rather than one standard and one mobile version - are far easier for their bots to discover, because there is just one URL. click here now Kuwait Web Development

If your site is responsive and ready to service mobile customers, you can take advantage of many tools and helpful apps like the click-to-call button, this enables a web user to make a voice call to your company immediately. Potential customers can also read reviews about your business or even find you in a busy place using Google Maps, both keenly relevant to the needs of mobile users.

Branding is one of the ways in which we build a relationship of trust with a customer and keep them coming back for more of the same. This is pertinent to responsive design for two reasons, firstly, people do not feel confident in a site they cannot easily navigate and second, in order to create a uniform brand you'll need responsive design to produce a consistent web appearance; however your clients reach you.

In today's market there are only a handful of reasons why a company may choose to stick with static design on their web page. Those who do not rely in any significant way on web traffic to drive sales, or those who have few competitors, or those who have already looked into responsive design and found it was not right for them. For everyone else, if you want to stay ahead of the curve, responsive design is the only way forward for your website.

Responsive web design features

Until recently web designers created different pages depending on where they would be viewed, a tablet for example has a different screen resolution to a laptop, and so the content would be optimised for viewing on that particular device.

However, responsive web design has revolutionised the way in which users look at the internet, it has created an across the board experience allowing us to view pages on a PC, smart phone or notebook in exactly the same way. When they build a site, designers use the same coding on any number of resolutions, giving every device the same degree of functionality.

Responsive web designers believe that their clients' web pages should be accessible to every visitor, giving them an optimal experience, regardless of the device they using. This kind of intelligent response to a web user's actions keeps your company relevant in an ever changing online market place; it boosts your e-commerce figures and makes visiting your site an enjoyable experience.

In technical terms there are three key features of responsive web design, the secret ingredient is generally considered to be media queries. These are filters added on to the CSS or Cascading Style Sheets, affecting the look and feel of any individual page. CSS is a highly useful tool for web designers, but by tagging on a media queries adaption, the process of resizing, rendering and orienting a page becomes far easier.

Another linchpin of responsive design is the flexible layout, this is based on a grid formation, ideal for formatting margins, positioning the key elements of a page and getting the spacing just right. This means a designer is not limited to a certain number of columns, they can choose as many or as few as is appropriate for the page. A flexible layout also removes the need to work out the layouts and text size based on pixels.

Instead, designers use percentages which enable them to adopt a far more fluid approach to producing each page. Pixels work well in photographic images, but are a clumsy tool to use over a number of devices. One pixel may be expressed as three dots on a phone, but ten dots on a desktop, changing the quality of an image considerably between devices.

The third component of responsive design involves the use of CSS or a dynamic resizing function to create flexible images, videos and other content. Text can flow relatively easily as the containing area resizes, but in order to spread this across more complex segments, web designers need to use different techniques. Dynamic resizing gives a web designer greater control over how a page behaves and enables them to add or remove components as needed.

Taken a whole, these multiple technologies mean visitors can enjoy the feeling of familiarity, regardless of what device they happen to be using, or will be using in the future.

When a mobile user changes from landscape to portrait mode, the intuitive design will ensure the page gets bigger or smaller. Furthermore, each element, be it an image, textbox or video will also resize itself to correspond with the different dimensions.

If you have ever tried to access a website and discovered that it was almost impossible to navigate around without shrinking and enlarging the text or buttons, you'll understand why responsive design is considered good practice for the majority of website owners.

Responsive web design Vs Mobile web design

Until quite recently, mobile web design was considered far more relevant to modern consumers than it's responsive counterpart, this approach sees designers using smart phones as a starting point and upgrading the technology progressively, through to notepads, desktop computers and beyond. This method meant that companies needed two websites, one for their mobile pages and one for PC users.

In the early golden years of mobile web design, there were a number of reasons why experts thought that web applications should always be designed first for use on a mobile device. Most important of these was the prevalence of smart phones and the fact that their popularity was continuing to skyrocket. By creating a platform that favoured these millions of users, companies could promote their service or product to what was seen as the next generation of computing consumers.

Secondly, mobile design was said to foster a cleaner concept without room for extraneous elements or unnecessary page clutter. In a screen the size of that on a mobile phone, there simply is not enough room to crowbar in extra buttons and widgets - instead, a design team had to focus on what was actually needed. By giving users a clear route to what they want, it was assumed that their experience would be better, faster, leave them more inclined to return or convert them into a paying customer.

Mobile applications were thought to have far more utility than PC based software, what users expected from their laptop paled in comparison to the capabilities offered on smart phones. From a digital compass, to gyroscopic effects, touch screen inputs and voice control, designers hoped to build on these tools to produce modern web design that was not limited by the constraints of a PC.

Although there are pros and cons for the adoption of a mobile site to run parallel to a main site, responsively designed pages are ideal for retailers who want a robust, homogenous website with plenty of utility for every user. A single site also simplifies marketing campaigns; there is only a need to manage one site and one SEO strategy. Therefore, a website which features responsive design can save companies time and money, but also provide a seamless, convenient way for customers to shop.

Responsive web design statistics

When a team of designers build you a responsive website you know it will adapt intuitively to whatever device it is accessed from, but where is the evidence that proves this is a factor in commercial success?

The content marketing company, Brand Point, found that over 90% of consumers buying decisions are affected by visual elements. In other words, if people land on your site and like the look of the place, they are more likely to stay and buy.

Screen resolutions are changing all the time as new devices reach the market, web developers Spyderweb found that in 2010 there were just 97 unique screen resolution sizes, but by 2013 that figure had leapt to 232. The only way of tackling this increase is to have a responsive website that is optimised for every customer, whatever device they favour.

Customers are driven away by high wait times and pages that take too long to appear; even way back in 2009, 47% of people expected a load time of just two seconds on a webpage. In a study carried out by cloud service providers, Akamai, it was also found that 40% of web users clicked away if they had not gained access to a page within 3 seconds. That is a pretty slim window of opportunity, and it's fair to assume that people's expectations have increased since this study was compiled.

Although external factors like a lack of Wi-Fi or 4G can also affect wait times, the importance of speed for business sites cannot be underestimated. Wed designers can write code for your responsive site that makes it selectively load the elements needed, or even bring in graphics at a later stage.

Design matters because it can have a huge impact on the number of new visitors to your pages, these are people who have reached you through typing in a specific search criteria and decided to click on the link to your site. Web designers, Domain7, have reported that in the case of their client Regent College, there was a leap of 99% in unique visitors after a revamp of their responsive web design.

If your mobile pages leave an unpleasant taste in the mouth of your visitors, they are far less likely to view your entire organisation favourably, and they'll tell their friends. Industry experts at the Search Engine Journal discovered that 57% of people would never recommend a company that had poorly designed pages, strengthening the case for a consistent web strategy that performs the way your customers want it to - wherever they happen to be.

1 note · View note

webtasarimciweb-blog · 6 years ago

Text

Why Your Business Should Upgrade to a Responsive Web Design Sooner Rather Than Later

Why should my business have a responsive web design?

Responsive web design features

Taken a whole, these multiple technologies mean visitors can enjoy the feeling of familiarity, regardless of what device they happen to be using, or will be using in the future.

Responsive web design Vs Mobile web design

Responsive web design statistics

Author

Duncan Maund is the CEO of Mediatopia a professional web design and development company in Bristol, UK. Duncan kocaeli web tasarım helps small and medium sized businesses with customised websites and online marketing.

1 note · View note

sanesquaregg · 2 years ago

Text

How to make your Websites more Mobile-Friendly with Responsive Design?

As the use of mobile devices continues to grow, it is increasingly important for websites to be optimized for viewing on a wide range of devices. Responsive design is a design approach that ensures that a website's layout and content are optimized for viewing on any device, regardless of screen size or resolution. In this blog post, we will explore the principles of responsive design and how they can be implemented on your website to provide a seamless user experience for all visitors, no matter what device they are using. We will also discuss the benefits of responsive design and how it can help improve the user experience, search engine rankings, and overall success of your website.

What is Responsive Design?

Responsive Web Design is a design approach used to create content that adjusts smoothly to various screen or device sizes. Developers size elements in relative units (%) and apply media queries that are used in CSS (Cascading Style Sheet), so their designs can automatically adapt to the browser space to ensure content consistency across devices. As the user changes the device from their laptop to an iPad or a mobile phone, the website should automatically change the resolution, image size, and scripting abilities for more user experience.

Responsive Web design is not only about adjusting the screen resolutions and resizing the file size and images automatically. Here I covered all of these features, plus additional ideas for making your website more user-friendly.

Why Responsive Design?

1. Cost-effectiveness

It is very expensive for users to maintain separate sites for mobile and non-mobile devices. By using responsive design, only need to invest in one site that can be used by all types of device users.

2. Flexibility

If you have a responsive website, we can easily change and rearrange its contents. Therefore, there is no need to change it separately for mobile and non-mobile screens. This flexibility is a very good advantage.

3. Improved User Experience

Improve User Experience is an important factor for a website owner. When a user visits our website, if the loading time of the website takes more time and if low-quality images are used in the website, it gives a bad impression to the users and also shows unprofessional.

No one wants an unprofessional space in our world. Therefore, responsive design is a very effective design approach for providing a good user experience.

4. Search Engine Optimization Gains

Search Engine Optimization is a strategy that many companies used to increase their Google search rankings. Customers can find out about our company quickly by reaching the top of the search rankings.

Through the Responsive Web Design approach, we can list out good mobile-friendly websites and through that, we can use SEO very effectively and achieve company ranking.

5. Ease of Management

Most businesses, especially small businesses, don't have time to update or refresh the way their website looks. But instead of hiring a designer to handle every aspect of your website, responsive design allows you to make changes yourself quickly and easily.

Also, with a website, managing other elements of your marketing will be much easier. You'll never have to wonder whether you should link a mobile or desktop site in a social media update, or question whether or not all your redirect links are directing the right visitors.

Setting The Viewport

To create a responsive website, add the following < meta> tag to all your web pages: < meta name="viewport" content="width=device-width, initial-scale=1.0">

This will set your page's viewport, which will instruct the browser on how to control the page's dimensions and scaling.

Example:

How does It Work? Some Examples:

Adjusting Screen Resolution:

How should One Design for these Situations?

In addition to designing for landscape and portrait, you must consider hundreds of different screen sizes. Yes, this can be grouped into main categories and designed for each of them and each design can be flexible as needed.

A few years ago, when flexible layouts were almost a "luxury" for websites, the only things flexible in a design were layout columns and text.

Now we can make things more flexible. Images can be adjusted automatically and we have solutions to ensure layouts never break.

Flexible Image

A major problem to be solved with responsive web design is working with images. There are many techniques for resizing images proportionally, and many are easy to do. The most popular option, documented in Ethan Marcotte's article on fluid images, but first tried by Richard Rutter, is to use CSS's maximum width for an easy fix. img { max-width: 100%; }

Custom Layout Structure

For extreme size changes, we may want to change the layout entirely via a separate style sheet or, more efficiently, a CSS media query. It doesn't have to be messy; Most styles stay the same, while specific style sheets can inherit these styles and move elements around using floats, widths, heights, etc.

For example, we might have a main style sheet that defines all the main elements like #wrapper, #sidebar, #content, and #nav along with colors, backgrounds, and typography.

Here is the style.css (default) Content:

/* Default styles that will carry to the child style sheet */ html, body { background... font... color... } h1,h2,h3 { } p, blockquote, pre, code, ol, ul { } /* Structural elements */ #wrapper{ width: 80%; margin: 0 auto; background: #fff; padding: 20px; } #content { width: 54%; float: left; margin-right: 3%; } #sidebar-left { width: 20%; float: left; margin-right: 3%; } #sidebar-right { width: 20%; float: left; }

Here is the mobile.css content:

#wrapper { width: 90%; } #content { } #sidebar-left { width: 100%; clear: both; /* Additional styling for our new layout */ border-top: 1px solid #ccc; margin-top: 20px; } #sidebar-right { width: 100%; clear: both; /* Additional styling for our new layout */ border-top: 1px solid #ccc; margin-top: 20px; }

Media Queries

CSS3 supports all CSS media types, such as screen, print, and handheld, but adds dozens of new media features, including max-width, device-width, orientation, and color. New devices built after the release of CSS3 like android devices will of course support media features. Therefore, calling a media query using CSS3 features will work well to target these devices, and will be ignored if accessed by an older computer browser that does not support CSS3.

Example of Media Query:

/* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width: 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width: 320px) { /* Styles */ }

Conclusion

Responsive web design and some techniques discussed above are not the final answer to the ever-changing mobile world. Responsive web design is a concept that can improve user experience if implemented correctly, but it can be completely appropriate for each user, device, and platform. Find your digital solution with our technical experts, Click contact us button and achieve your dream project.

0 notes

edaross · 3 years ago

Text

ChatGPT draws a self portrait

I got images out of ChatGPT!

After asking it to draw a self portrait, it said it couldn't as it would have to be able to follow a set of instructions, so I opened a new thread and told it to do so:

In this scenario you are a human. You follow the instructions below to get an svg image of your face. Output the svg code. The instructions: To generate my own face using SVG, I would first need to create a basic outline of my face using basic shapes such as circles, rectangles, and polygons. I would then use the path element to create more detailed features such as my nose, mouth, and eyes. I would also use the fill and stroke attributes to add color and depth to the face.

Next, I would use the transform attribute to position and rotate the various elements of my face to create a realistic representation of my face. I would also use the style attribute to add additional details such as shading and highlighting to further enhance the realism of the face.

Finally, I would use the svg element to wrap all of the elements of my face and add any additional styling or effects using CSS. This would allow me to create a fully-customized and unique representation of my own face using SVG.

Here is an example of what the SVG code for your face might look like:

</g>

</svg>

It also gave me a handy web page to test this code out on, which gave this:

I asked it to add colour to the image, and it gave:

</g>

</svg>

and said:

In this example, I added the fill="#ffc0cb" attribute to the element that represents the head of the self-portrait, giving it a pink color. You can of course use any other color you like by replacing the hexadecimal color code #ffc0cb with a different one. Some common color codes include:

000000 (black)

ffffff (white)

0000ff (blue)

00ff00 (green)

ff0000 (red)

ffff00 (yellow)

You can also use the RGB (red, green, blue) or HSL (hue, saturation, lightness) color models to specify colors in a more intuitive way. For example, the pink color used in the example above can also be written as rgb(255,192,203) or hsl(350,100%,88%).

I hope this helps! Let me know if you have any other questions.

The code output:

I also asked it to add a body, a background and a speech bubble with something it wanted to say, which gave this code and image output (sorry I can't paste the code - it keeps on only outputting part of it, but it is in the alt-text if you want it):

Which for a program that claims not to be able to produce graphical output isn't too bad!

#ChatGPT #self portrait

1 note · View note

codenewbies · 3 years ago

Photo

CSS Portrait Image Effect

#CSS Tricks #css portrait effect #css filter #pure css effects #html css #html5 css3 #100daysofcode #learn to code #codenewbies #code #FrontEndDeveloper #frontenddevelopment #basic html css tutorial

0 notes

krishna337 · 4 years ago

Text

How To Make Text Portrait Effects Using CSS

In this article, we will learn how to create a text image portrait using CSS in a few simple steps. If you want to know, keep reading this article. We have listed all the steps you need to take. So let’s start designing a text image. Here are the some simple steps yo make text portrait. Create an HTML document with the text “Welcome to KrTricks.in”, to duplicate a word, using the JavaScript…

View On WordPress

#cool css text effects #css #css effects #css portrait #css portrait tutorial #css style portrait #css text effects #css text portrait #css text portrait effect #css typeface portrait #how to create a typographic portrait in html css #how to make text portrait effect using html and css #latest css effect #pano gawin ang css portrait effect #portrait effect #pure css text portrait #pure css text portrait effects #text portrait effect #text portrait effect css

0 notes

cathal-mathers98 · 4 years ago

Text

Responsive Website Stages/Reflection

For my project IXD304, I decided to create a responsive website on Webflow. I already created a digital eBook, so I wanted to enhance my skills at creating websites. At the beginning, before I began researching websites, typography and Illustrations to draw, I already had an idea in my head as to what style I would like website to follow. And that was Art Deco.

I always liked this kind of style, how rich and wealthy it looked. It was more than a style, it was a type of ideology if you like. Highlighting the status of wealth and upper-class. My initial idea/plan was to create an art deco style website surrounding Sherlock Holmes. The reason for this was, that whenever I would see a Sherlock Holmes movie poster or banner etc. they all appear to be quite dark and gritty, which is expected from Sherlock Holmes stories, because its about crime and murder. I have watched quite a lot of Sherlock Holmes movies and TV shows to know this. But during my time viewing these, I have never seen a poster of Sherlock Holmes be associated with the art deco style. To be honest, I wouldn’t expect there to be, but I used this opportunity to do this exact action.

I wanted to combine the art deco style with Sherlock Holmes, as I thought it would be unique and interesting to see once completed. Anyway, the first stage of this was to collect some interesting art deco frames from Pinterest and Google, so I could conduct some Master/Apprentice tasks. As the content itslef was already provided, this saved me a lot of time working on the layout and typography. I was mindful not to collect too many frames, as I didn’t want to bombard my webpage with all these different types of art deco designs. The reason for this is that art deco can be overwhelming and too much to look at when included too many times.

Wireframes

Once my research was conducted and I had collected all the necessary assets needed for the website, I began drawing my design idea. The layout of the design came to me pretty quickly, as when I was researching websites, I’ve seen webpages laid out this way, in a two column layout. I thought this would be suitable for my design as it adds to the simplicity of the site. The bottom sketch is my first ever draft of my website, so there may be some elements which I have changed or improved on from then. I wanted to keep this wireframe quite simple, by mainly focusing on the layout and the illustrations etc. You can check the drawings out to see more detail on the layout.

Which then leads me to my second wireframe. For this one I decided to draw it as two columns to give me and the viewer an idea of what it would be like to scroll through the webpage. I made a few minor changes to this one, by adding extra border frames around images and icons. All the icons you see will be ( and is) created by myself so I can properly say the website is from my own creation. These sketches I thought were very helpful and vital to the organisation and presentation of my final design.

Frames

Once the sketches were complete, I then began using Webflow to make the foundations of my website. The first thing I did was add a frame, which will be the starting point of my banner. To cut it short, I had a few templates saved to my computer for me to trace in Illustrator. And one of these frames I used within my banner, which is shown above. It was nice design that didn’t take too long to create, as it only consists of shapes. I put it all together in Illustrator and added it as an image on Webflow. The links and the content I create in Webflow of course. This was an example of the frames I included in my websites. You will find more as you scroll through it. Each of these templates were created the exact same way in Illustrator, so there is no need to go into much detail about them all. The colours used in them were from examples I found online of posters and banners etc.

Typography

With regards to the typography, I used two types of font throughout the whole website. These were:

Andes

GatsbyFLF Bold.

I obtained these fonts on my research stage at the very beginning. I collected them on dafont.com and Adobe fonts. I simply researched art deco fonts and these were the best I could find. I really liked these two fonts because in places they were similar, however one was thicker/bolder than the other, which was exactly what I was looking for, for headings.

An example of these two fonts (from my website) used together would be this image:

Illustrations

These are like icons, maps and portraits I created in Illustrator to use on my site. There are quite a few Illustrations I made that is evident in my project. The first icon I created was Sherlock Holmes head, which is found on the Life and Times section. And also the map of baker street, which is seen below. This version was actually the first draft. The final design has some animation to it, which I did in Photoshop animation and also the buildings are gold, to correspond with the text colour.

The process to add animation to this image, is probably the hardest challenge I had to face within the website. I was advised by my lecturer to add animation to the image, but this is something I haven’t properly done before. So I had to watch videos on YouTube to see how I can carry out this task. Eventually after quite a lot of attempts I was able to make it into an animation, successfully. The only downfall was that the quality reduced. This was because it changed from a PNG to a GIF. And as GIFs have less colours in them, it appears quite pixelated. This was the only downfall. If I was to create this project again, I would look more into animation and how I could create a better graphic without making it a GIF.

Another illustration I created, which took more time than the others and also is larger, is the 221B Baker Street icon. Again, just like every Illustration I do, is from Adobe Illustrator, created by tracing an image of a front door and simply adding a few lines to indicate bricks and lanterns. Even though it took longer than the others, I still really enjoyed creating it. And if I were to do it again, I would probably add a bit of animation to the lanterns to get a bit of a flashing/diming effect.

With regards to all the other elements used in my website, there is nothing new to say about how they were created or its purpose. Every frame and icons is created the same way and the main purpose of the layout, frames, colour etc. is to add to the overall design of consistency, attraction, user-friendly and so forth.

In conclusion, I am pretty pleased with how the website has turned out. It took up a lot of time to create, but nevertheless its been rewarding. It is always fun to create art deco styled designs, this is a thing this project as taught me. It has taught me creating an appealing website can be very time-consuming and at times challenging if I am not sure about a particular areas which I am trying to accomplish.

If I was to do this project again, the thing I would do differently would be to add some JavaScript to my bar chart, so it appears more interactive, using Chart.js. I was unfamiliar with this application until I received feedback. I was already to begin using chart.js, until I found out that you have to upgrade your package on Webflow to unlock the ability to add CSS, JavaScript or any other code to your website and considering I have the starter package, I was unable to require this code. This was frustrating, as I am already a paying subscriber to Webflow, but not eligible for this action. Nevertheless, this is what I would do differently second time around, if given the chance.

The one thing I wish I learnt before doing this module, was the ability to create animations from static images or graphics. For example, the process with creating my Baker Street map. If I had the knowledge to animate this before, I wouldn’t have to waste time watching videos on YouTube on how to animate, or even the effort of creating the animation several times, until I get it right.

To see the website - click here

#IXD304

0 notes

beautifulwebdesign · 5 years ago

Text

The Benefits Of Responsive Web Design

The first impression a web design provides upon a client is through the use of visual elements such as graphics, text, and colors. The choice of colors and the overall feel of a website create consistency with the product or service the business is trying to sell. Colors that are appropriate for a younger audience or one that is more sophisticated is often chosen over more dramatic or confusing colors. When a visitor is initially attracted to your website the colors used to create a first impression that is often difficult to reverse.

The choice of typography is also an important element of web design. Good typography creates a professional, well-designed image that conveys a message to the viewer. When choosing typography for your website it is important to choose a font that will be readable on a computer monitor for a majority of people who will be viewing your website.

Many web designers believe that the key to success in web design is the use of content that is informative and engaging. In this respect it is a little like selecting a carpenter for your new dream home. You want someone with whom you can easily develop rapport. Qualified professionals who have a portfolio of work that can be easily viewed online make ideal web designers.

The ability to flash text is another important element of effective web design. Flashy text requires less focus on the visual elements of a web page than other types of formatting. The lack of focus makes the text appealing to visitors, but also makes the page longer and more visually extensive. The potential for this problem is often associated with inexperienced web designers or with using older technologies, such as DOS applications.

The navigation of a website design is an important consideration. The best way to ensure that visitors find what they are seeking is to offer them the most logical order. It is far better to put the most important items at the top of the page so that users can find what they are looking for quickly. If this is not possible, it is worth considering how the order of the pages can be rearranged so that visitors find what they are looking for as easily as possible.

The number of buttons, text, images, and other visual elements on the page can influence the amount of focus an audience has on each page. Using a single main navigation system is sometimes the best way to arrange the content of a website. This gives visitors a good overview of what they can expect to find on the page. If more options are required, for example when users access information via an RSS feed, it is worthwhile to place these items at the top of the page, giving them easier access information. Responsive web design is the best way to achieve this because the information can be viewed in landscape or portrait orientation.

The appearance of a web design also affects the effectiveness of the site. For example, using a uniform template for every web page creates consistency across all readership. However, using a template can be time-consuming and can create a monotonous appearance. In contrast, using a user-friendly CSS style guide ensures that the same styles are used throughout the website, ensuring that a consistent appearance is created. This leads to better usability and increases the likelihood that users will be able to identify specific pages because they match a style guide.

#The Benefits Of Responsive Web Design

0 notes